import * as THREE from 'three';
//导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
// 导入gltf模型
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
import './style.css';

// 首先创建场景
const scene = new THREE.Scene();

// 创建相机（角度，宽高比，可视距离区间）设置视锥体尺寸
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

// 设置相机xyz的位置
camera.position.set(0, 0, 10);

// 给场景添加摄像机
scene.add(camera);

// // 建一个立方缓冲几何体，立方体的方法是new THREE.BoxGeometry(x,y,z);
// const geometry = new THREE.BoxGeometry(1, 1, 1);

// // 创建几何体的材质
// const material = new THREE.MeshLambertMaterial({
//   color: 0xff6600, //设置材质颜色
//   transparent: true, //开启透明
//   opacity: 0.9, //设置透明度
// });

// // 物体需要几何体和材质来创建，把新建的立方体和材质，创建网格的风格创建出来
// const cube = new THREE.Mesh(geometry, material);

// // 把网格添加到场景中
// scene.add(cube);

const dracoloader = new DRACOLoader();
dracoloader.setDecoderPath('./draco/gltf/');
dracoloader.setDecoderConfig({ type: 'js' });
const gltfloader = new GLTFLoader();
gltfloader.setDRACOLoader(dracoloader);

gltfloader.load('./model/gltf/天气控制器.glb', (gltf) => {
  gltf.scene.traverse((child) => {
    if (child instanceof THREE.Mesh) {
      child.castShadow = true;
      child.receiveShadow = true;
    }
  });
  scene.add(gltf.scene);
  gltf.scene.scale.set(0.02, 0.02, 0.02);
  gltf.scene.position.set(0, 0, 0);
});

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 指定渲染器的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

renderer.render(scene, camera);

const light = new THREE.DirectionalLight(0xffffff, 0.5);
const light2 = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(15, 20, 0);
light.position.set(0, 0, 15);
scene.add(light, light2);

// 创建轨道控制器，并让轨道控制器调用摄像机，和渲染器的dom元素
const controls = new OrbitControls(camera, renderer.domElement);

// 添加坐标轴辅助器（坐标轴的长度）
// axes:轴 helper:辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper); // 把坐标轴添加到场景中

// 添加环境光
const ambientLight = new THREE.AmbientLight(0xffffff);
ambientLight.position.set(0, 400, 0); //点光源放在x轴上

ambientLight.intensity = 2.0; //光照强度
// ambientLight.intensity = 50000.0; //光照强度

scene.add(ambientLight);

// 渲染函数
function animate() {
  controls.update();

  // 渲染场景
  renderer.render(scene, camera);
  // 渲染下一帧的时候就会调用render函数
  requestAnimationFrame(animate);
}

animate();
